<template>
  <iframe
    id="jc-iframe"
    title=""
    allow="payment"
    allowfullscreen="true"
    :src="iframeSrc"
    class="jcadminiframe"
    sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
  >
    <p>你的浏览器不支持 iframes, 请更新到chrome、firefox等现代浏览器的最新版本后再进行访问。</p>
  </iframe>
</template>

<script lang="ts">
export default {
  name: 'UseIframe'
}
</script>

<script lang="ts" setup>
import { getCurrentInstance, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { iframeStore } from './stores/iframes'
import { useRouter, useRoute } from 'vue-router'
import type { Ref, ComponentInternalInstance } from 'vue'
import type { Router, RouteLocationNormalizedLoaded } from 'vue-router'

// ifarams stores
const iframeDist = iframeStore()
const { iframDict } = storeToRefs(iframeDist)

// props
const props = defineProps({
  url: {
    type: String,
    default: 'Undefined Page URL!'
  },
  nodeId: {
    type: String
  }
})

// define params
const that = getCurrentInstance() as ComponentInternalInstance
const router: Router = useRouter()
const route: RouteLocationNormalizedLoaded = useRoute()

const iframeSrc: Ref<string> = ref(props.url)

// watch: {
//   router(to) {
//     iframeSrc.value = iframDict.value[to.fullPath]
//   }
// }

watch(
  () => route,
  (current, previous) => {
    iframeSrc.value = iframDict.value[current.fullPath]
  }
)
</script>

<style lang="scss" scoped>
.jcadminiframe {
  height: 100%;
  width: 100%;
}
</style>
